<template>
    <view :style="objColor">
        <!-- 搜索框 -->
        <view class="search search-wrap">
			<view class="search_box">
				<view class="location" @click="goLocation">
					<view class="city_name">{{ cityname || '请选择' }}</view>
					<image class="icon" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/down.png"></image>
				</view>
				<view class="search_input">
					<!-- 搜索框 -->
					<view class="weui-search-bar">
						<view class="weui-search-bar__form">
							<!-- 点击之后，跳转搜索页面 -->
							<view class="weui-search-bar__box">
								<icon class="weui-icon-search_in-box" type="search" size="16"></icon>
								<input type="text" class="weui-search-bar__input" v-model="keyword" placeholder="请输入站点/地点名称" @confirm="goSearchSite" />
							</view>
						</view>
					</view>
				</view>
				<view class="search_btn" @click="goSearchSite">
					<text>搜索</text>
				</view>
			</view>
            <view class="screen">
				<view class='nav'>
					<view
						:class="'nav-item ' + (navIndex == item.value ? 'activite' : '')"
						v-for="item in tabMenu"
						:key="item.value"
						@click="checkIndex"
						:data-value="item.value">
						{{ item.label }}
					</view>
				</view>
				<view class="all" @click="showPreferenceFun">
					<image class="icon" src="https://oos-cn.ctyunapi.cn/front-end/static/static/screening.png"></image>
					<text>筛选</text>
				</view>
            </view>
        </view>
        <!-- 站点信息 -->
        <view v-if="siteItemData.list.length > 0" style="padding-top: 180rpx;">
            <siteListItem :itemData="siteItemData" @myevent="myevent"></siteListItem>
            <view class="noList" v-if="LoadingComplete">没有更多了</view>
        </view>
        <view v-if="siteItemData.list.length <= 0&&loading">
			<Upgrading
				v-if="showLocalService > 0"
				:text="showLocalService === 1? '定位服务未开启' : '定位服务信号弱'"
				text1="暂无法获取充电桩站信息"
				type="location"
				icon="https://oos-cn.ctyunapi.cn/front-end/static/static/localtion.png">
			</Upgrading>
            <Upgrading text="暂无站点" v-else></Upgrading>
        </view>

        <!-- 地区 -->
        <uni-popup ref="showRegionPup" background-color="#fff" safe-area type="bottom" >
            <view class="search">
                <view class="search_box">
                	<view class="location" @click="goLocation">
                		<view class="city_name">{{ cityname || '请选择' }}</view>
                		<image class="icon" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/down.png"></image>
                	</view>
                	<view class="search_input">
                		<!-- 搜索框 -->
                		<view class="weui-search-bar">
                			<view class="weui-search-bar__form">
                				<!-- 点击之后，跳转搜索页面 -->
                				<view class="weui-search-bar__box">
                					<icon class="weui-icon-search_in-box" type="search" size="16"></icon>
                					<input type="text" class="weui-search-bar__input" v-model="keyword" placeholder="请输入站点/地点名称" @confirm="goSearchSite" />
                				</view>
                			</view>
                		</view>
                	</view>
                	<view class="search_btn" @click="goSearchSite">
                		<text>搜索</text>
                	</view>
                </view>
                <view class="screen">
                    <view class="preference" @tap="showRegionFun">
                        地区
                        <image class="preferenceImg" src="https://oos-cn.ctyunapi.cn/front-end/static/static/down.png"></image>
                    </view>
                    <view class="region" @tap="showPreferenceFun">
                        偏好
                        <image class="regionImg" src="https://oos-cn.ctyunapi.cn/front-end/static/static/down.png"></image>
                    </view>
                    <view class="region1" @tap="showComprehensiveFun">
                        综合排序
                        <image class="regionImg1" src="https://oos-cn.ctyunapi.cn/front-end/static/static/down.png"></image>
                    </view>
                </view>
            </view>
            <view class="pop_top1">
				<view class="content_list_Region">
				 <scroll-view scroll-y="true" class="scroll_view_style">
                <view class="area">
                    <view :class="item.isCheck ? 'areaItem_sel' : 'areaItem'" @tap="checkArea" :data-id="item.id" v-for="(item, index) in regionList" :key="index">
                        {{ item.name }}
                    </view>
                </view>
				</scroll-view>
				</view>
                <view class="type_btn">
                    <view class="btn1" @tap="canalRegion">清除</view>
                    <view class="btn2" @tap="enterRegion" :style="'background:'+ objColor2.textColor">确定</view>
                </view>
            </view>
        </uni-popup>
        <!-- 偏好-筛选 -->
        <uni-popup ref="showPreferencePup" background-color="#fff" safe-area type="bottom">
            <view class="search">
                <text class="title">筛选</text>
            </view>
            <view class="pop_top">
				<view class="content_list">
				 <scroll-view scroll-y="true" class="scroll_view_style">
                <!-- 距离 -->
                <view class="type">
                    <view class="type_title">{{ distanceList.name }}</view>
                    <view class="type_list">
                        <view
                            :class="memberQueryPreferenceDto.distance == item.key ? 'type_itme_sel' : 'type_itme'"
                            @tap="checkDistance"
                            :data-key="item.key"
                            v-for="(item, index) in distanceList.list"
                            :key="index"
                        >
                            {{ item.value }}
                        </view>
                    </view>
                </view>
                <!-- 站点类型 -->
                <view class="type">
                    <view class="type_title">{{ siteTypeList.name }}</view>
                    <view class="type_list">
                        <view
                            :class="memberQueryPreferenceDto.stationType == item.key ? 'type_itme_sel' : 'type_itme'"
                            @tap="checkSiteType"
                            :data-key="item.key"
                            v-for="(item, index) in siteTypeList.list"
                            :key="index"
                        >
                            {{ item.value }}
                        </view>
                    </view>
                </view>
                <!-- 充电模式 -->
                <view class="type">
                    <view class="type_title">{{ chargingModeList.name }}</view>
                    <view class="type_list">
                        <view
                            :class="memberQueryPreferenceDto.fastSlow == item.key ? 'type_itme_sel' : 'type_itme'"
                            @tap="checkChargingMode"
                            :data-key="item.key"
                            v-for="(item, index) in chargingModeList.list"
                            :key="index"
                        >
                            {{ item.value }}
                        </view>
                    </view>
                </view>
                <!-- 建设场所 -->
                <view class="type">
                    <view class="type_title">{{ constructionSiteList.name }}</view>
                    <view class="type_list">
                        <view
                            :class="memberQueryPreferenceDto.construction == item.key ? 'type_itme_sel' : 'type_itme'"
                            @tap="checkConstructionSite"
                            :data-key="item.key"
                            v-for="(item, index) in constructionSiteList.list"
                            :key="index"
                        >
                            {{ item.value }}
                        </view>
                    </view>
                </view>
				<!-- 优惠 -->
				<!-- <view class="type">
				    <view class="type_title">{{ discountList.name }}</view>
				    <view class="type_list">
				        <view
				            :class="memberQueryPreferenceDto.discount == item.key ? 'type_itme_sel' : 'type_itme'"
				            @tap="checkIsDiscount"
				            :data-key="item.key"
				            v-for="(item, index) in discountList.list"
				            :key="index"
				        >
				            {{ item.value }}
				        </view>
				    </view>
				</view> -->
				</scroll-view>
				</view>
                <view class="type_btn">
                    <view class="btn1" @tap="canalPreference">清除</view>
                    <view class="btn2" @tap="enterPreference" :style="'background:'+ objColor2.textColor">确定</view>
                </view>
            </view>
        </uni-popup>
        <!-- 综合排序 -->
        <uni-popup ref="showComprehensivePup" background-color="#fff" safe-area type="bottom">
            <view class="search">
                <view class="search_box">
                	<view class="location" @click="goLocation">
                		<view class="city_name">{{ cityname || '请选择' }}</view>
                		<image class="icon" src="https://oos-cn.ctyunapi.cn/front-end/static/homeSub/images/down.png"></image>
                	</view>
                	<view class="search_input">
                		<!-- 搜索框 -->
                		<view class="weui-search-bar">
                			<view class="weui-search-bar__form">
                				<!-- 点击之后，跳转搜索页面 -->
                				<view class="weui-search-bar__box">
                					<icon class="weui-icon-search_in-box" type="search" size="16"></icon>
                					<input type="text" class="weui-search-bar__input" v-model="keyword" placeholder="请输入站点/地点名称" @confirm="goSearchSite" />
                				</view>
                			</view>
                		</view>
                	</view>
                	<view class="search_btn" @click="goSearchSite">
                		<text>搜索</text>
                	</view>
                </view>
                <view class="screen">
                    <view class="preference" @tap="showRegionFun">
                        地区
                        <image class="preferenceImg" src="https://oos-cn.ctyunapi.cn/front-end/static/static/down.png"></image>
                    </view>
                    <view class="region" @tap="showPreferenceFun">
                        偏好
                        <image class="regionImg" src="https://oos-cn.ctyunapi.cn/front-end/static/static/down.png"></image>
                    </view>
                    <view class="region1" @tap="showComprehensiveFun">
                        综合排序
                        <image class="regionImg1" src="https://oos-cn.ctyunapi.cn/front-end/static/static/down.png"></image>
                    </view>
                </view>
            </view>
            <view class="pop_top1">
                <view class="comprehensive">
                    <view
                        :class="comprehensiveIndex == index ? 'comprehensiveItem_sel' : 'comprehensiveItem'"
                        @tap="checkComprehensive"
                        :data-index="index"
                        :data-value="item.value"
                        v-for="(item, index) in comprehensiveList"
                        :key="index"
                    >
                        <view>{{ item.name }}</view>
                       
                        <image v-if="comprehensiveIndex == index" class="comprehensiveImg" src="https://oos-cn.ctyunapi.cn/front-end/static/static/fill.png"></image>
                    </view>
                </view>
                <!-- <view class="type_btn">
            <view class="btn1" bindtap="canalComprehensive">清除</view>
            <view class="btn2" bindtap="enterComprehensive">确定</view>
        </view> -->
            </view>
        </uni-popup>
    </view>
</template>

<script>
'use strict';
import siteListItem from 'components/site-list/site-list-item';
import Upgrading from 'components/upgrading/upgrading';

var app = getApp();

var https_1 = require('api/https.js');

export default {
    components: {
        siteListItem,
        Upgrading
    },
    data() {
        return {
            loading:false,
            //站点组件
            siteItemData: {
                list: []
            },

            //综合排序:0:距离;1:价格;2:空闲
            comprehensiveList: [
                {
                    value: null,
                    name: '综合排序'
                },
                {
                    value: 0,
                    name: '离我最近'
                },
                {
                    value: 1,
                    name: '价格最低'
                },
                {
                    value: 2,
                    name: '空闲枪最多'
                }
            ],
			bar_Height: uni.getSystemInfoSync().statusBarHeight,
            comprehensiveIndex: 0,
            sortMode: null,
            cityname: '城市',
            csiteid: -1,
            current: 0,
            areaId: 0,
            page: 1,
            pages: 2,
            pageSize: 10,
            showPreference: false,
            showRegion: false,
            showComprehensive: false,

            //站点数组
            siteList: {
                list: []
            },

            siteDetails: {},
            latitude: '',
            longitude: '',
            keyword: '',
            regionList: [],

            memberQueryPreferenceDto: {
                distance: null,
                fastSlow: null,
                stationType: null,
                construction: null,
				discount: null
            },

            distanceList: {
                name: '距离',
                list: [
                    {
                        value: '不限',
                        key: null
                    },
                    {
                        value: '1KM',
                        key: 1
                    },
                    {
                        value: '3KM',
                        key: 3
                    },
                    {
                        value: '5KM',
                        key: 5
                    },
                    {
                        value: '10KM',
                        key: 10
                    },
                    {
                        value: '20KM',
                        key: 20
                    },
                    {
                        value: '50KM',
                        key: 50
                    },
                    {
                        value: '100KM',
                        key: 100
                    }
                ]
            },

            siteTypeList: {
                name: '站点类型',
                list: [
                    {
                        value: '不限',
                        key: null
                    },
                    {
                        value: '公共',
                        key: 1
                    },
                    {
                        value: '个人',
                        key: 2
                    },
                    {
                        value: '公交',
                        key: 3
                    },
                    {
                        value: '环卫',
                        key: 4
                    },
                    {
                        value: '物流',
                        key: 5
                    },
                    {
                        value: '出租车',
                        key: 6
                    },
                    {
                        value: '其他',
                        key: 7
                    }
                ]
            },

            chargingModeList: {
                name: '充电模式',
                list: [
                    {
                        value: '不限',
                        key: null
                    },
                    {
                        value: '超充',
                        key: 'overTake'
                    },
                    {
                        value: '快充',
                        key: 'kuai'
                    },
                    {
                        value: '慢充',
                        key: 'man'
                    }
                ]
            },

            constructionSiteList: {
                name: '建设场所',
                list: [
                    {
                        value: '不限',
                        key: null
                    },
                    {
                        value: '居民区',
                        key: 1
                    },
                    {
                        value: '公共机构',
                        key: 2
                    },
                    {
                        value: '企事业单位',
                        key: 3
                    },
                    {
                        value: '写字楼',
                        key: 4
                    },
                    {
                        value: '工业园区',
                        key: 5
                    },
                    {
                        value: '交通枢纽',
                        key: 6
                    },
                    {
                        value: '大型文体设施',
                        key: 7
                    },
                    {
                        value: '城市绿地',
                        key: 8
                    },
                    {
                        value: '大型建筑配件停车场',
                        key: 9
                    },
                    {
                        value: '路边停车位',
                        key: 10
                    },
                    {
                        value: '城际高速服务区',
                        key: 11
                    },
                    {
                        value: '其他',
                        key: 12
                    }
                ]
            },

			discountList: {
			    name: '优惠',
			    list: [
			        {
			            value: '不限',
			            key: null
			        },
			        {
			            value: '有优惠',
			            key: 1
			        },
			        {
			            value: '无优惠',
			            key: 0
			        }
			    ]
			},

            areaIdList: [],
            LoadingComplete: false,
            cityname: '',
			tabMenu: [{
				label: '全部站场',
				value: 2
			}, {
				label: '精选推荐',
				value: 1
			}, {
				label: '价格特惠',
				value: 3
			}],
			navIndex: 2,
			showLocalService: 0
        };
    },
    onLoad: function (options) {
        if (options.stationsStreet) {
            this.setData({
                keyword: options.stationsStreet
            });
        }
    },
    onShow: function () {
       this.cityname = uni.getStorageSync('cityName') || uni.getStorageSync('currentCityName')
        this.getAreaList();
        this.getMemberQueryPreference();
        this.getStationPage('replace');
    },
    onHide: function () {
        this.setData({
            page: 1
        });
    },
    // 页面卸载
    onUnload: function () {
        uni.hideLoading();
    },
    //  * 页面上拉触底事件的处理函数
    onReachBottom: function () {
        var that = this;
        var page = that.page + 1;

        if (that.page < that.pages) {
            that.setData({
                page: page
            });
            this.getStationPage('');
        }
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        //调用刷新时将执行的方法
        this.setData({
            page: 1,
            pages: 1,
            'siteItemData.list': []
        });
        this.getStationPage('replace');
    },
    methods: {
        //定位
        goLocation: function () {
            app.globalData.CHECK_LOGIN(function () {
                uni.navigateTo({
                    url: '/homeSub/pages/area/area'
                });
            });
        },

        //选择地区
        checkArea: function (e) {
            var id = e.currentTarget.dataset.id;
            var list = this.regionList;
            var areaIdList = [];
            list.forEach(function (element) {
                if (element.id == id) {
                    element.isCheck = !element.isCheck;
                    list[0].isCheck = false;
                }
            });

            if (id == 0) {
                list.forEach(function (element) {
                    list[0].isCheck = true;
                    element.isCheck = false;
                });
            }

            list.forEach(function (element, index) {
                if (element.isCheck && index > 0) {
                    areaIdList.push(element.id);
                    areaIdList.map(Number);
                }
            });
            this.setData({
                regionList: list,
                areaIdList: areaIdList
            });
        },

        //选择距离
        checkDistance: function (e) {
            var key = e.currentTarget.dataset.key;
            this.setData({
                'memberQueryPreferenceDto.distance': key
            });
        },

        //选择站点类型
        checkSiteType: function (e) {
            var key = e.currentTarget.dataset.key;
            this.setData({
                'memberQueryPreferenceDto.stationType': key
            });
        },

        //选择充电模式
        checkChargingMode: function (e) {
            var key = e.currentTarget.dataset.key;
            this.setData({
                'memberQueryPreferenceDto.fastSlow': key
            });
        },

        //选择建设场所
        checkConstructionSite: function (e) {
            var key = e.currentTarget.dataset.key;
            this.setData({
                'memberQueryPreferenceDto.construction': key
            });
        },

		//选择有无优惠
		checkIsDiscount: function (e) {
		    var key = e.currentTarget.dataset.key;
		    this.setData({
		        'memberQueryPreferenceDto.discount': key
		    });
		},

        // 站点列表
        getStationPage: function (type) {
            var that = this;
            uni.showLoading({
					title: '加载中...',
					mask: true
				});
                that.loading=false
            var areaIds = this.areaId.toString();
			let cityId = uni.getStorageSync('cityId');
			let latitude = uni.getStorageSync('latitude');
			let longitude = uni.getStorageSync('longitude');
			if(app.globalData.userLocalStatus === 0 || cityId && latitude && longitude) {
				this.showLocalService = 0;
				https_1.indexStationNew({
					appointment: false,
					keyword: that.keyword,
					areaName: uni.getStorageSync('cityName') || uni.getStorageSync('currentCityName'),
					latitude: uni.getStorageSync('latitude'),
					longitude: uni.getStorageSync('longitude'),
					areaId: uni.getStorageSync('cityId'),
					areaIds: this.areaIdList ? this.areaIdList : [],
					current: this.page,
					memberQueryPreferenceDto: this.memberQueryPreferenceDto,
					pageSize: this.pageSize,
					sellerNo: app.globalData.sellerNo,
					sortMode: this.sortMode,
					type: this.navIndex,
					repair: 1
				}).then(function (res) {
					if (res.code == 0) {
						that.setData({
							page: res.data.pageNo,
							pages: res.data.pages
						});

						if (res.data.pageNo == res.data.pages) {
							that.setData({
								LoadingComplete: true
							});
						} else {
							that.setData({
								LoadingComplete: false
							});
						}

						var list = res.data.data || []; // 没有数据不操作

						// if (list.length == 0 && res.data.pageNo == 1) {
						// 	that.setData({
						// 		'siteItemData.list': []
						// 	});
						// 	return false;
						// }

						if (type === 'replace') {
							that.setData({
								'siteItemData.list': list
							});
						} else {
							that.setData({
								'siteItemData.list': that.siteItemData.list.concat(list)
							});
						}
                        that.loading=true
					}
                    uni.hideLoading();
					uni.stopPullDownRefresh();
				});
			} else {
				this.showLocalService = app.globalData.userLocalStatus
			}
        },

        //根据区域名获取区域
        getAreaList: function () {
            var that = this;
            https_1
                .getAreaList({
                    pId: uni.getStorageSync('cityId')
                })
                .then(function (res) {
                    if (res.code == 0) {
                        var list = res.data;
                        list.forEach(function (element) {
                            element.isCheck = false;
                        });
                        list.unshift({
                            id: 0,
                            name: '全部区',
                            isCheck: true
                        });
                        that.setData({
                            regionList: list
                        });
                    }
                });
        },

        // 获取用户偏好
        getMemberQueryPreference: function () {
            https_1.getMemberQueryPreference({}).then(function (res) {
                if (res.code == 0) {
                }
            });
        },

        myevent: function (e) {
            var data = e.detail;
            this.siteItemData = data;
        },

        //展开地区
        showRegionFun() {
			 this.$refs.showRegionPup.open()
			 this.$refs.showPreferencePup.close()
			 this.$refs.showComprehensivePup.close()
            // var that = this;
            // app.globalData.CHECK_LOGIN(function () {
            //     that.setData({
            //         showPreference: false,
            //         showRegion: true,
            //         showComprehensive: false
            //     });
            // });
        },

        //关闭地区
        onCloseRegion: function () {
            this.setData({
                showRegion: false
            });
        },

        //清除地区
        canalRegion: function () {
            var list = this.regionList;
            list.forEach(function (element) {
                list[0].isCheck = true;
                element.isCheck = false;
            });
            this.setData({
                regionList: list,
                areaIdList: [],
                page: 1,
                showRegion: false
            });
			this.$refs.showRegionPup.close()
            this.getStationPage('replace');
        },

        //确定地区
        enterRegion: function () {
            this.setData({
                page: 1,
                showRegion: false
            });
			this.$refs.showRegionPup.close()
            this.getStationPage('replace');
        },

        //展开偏好
        showPreferenceFun: function () {
            // this.setData({
            //     showPreference: true,
            //     showRegion: false,
            //     showComprehensive: false
            // });
			this.$refs.showRegionPup.close()
			this.$refs.showPreferencePup.open()
			this.$refs.showComprehensivePup.close()
        },

        //关闭偏好
        onClosePreference: function () {
            this.setData({
                showPreference: false
            });
        },

        //清除偏好
        canalPreference: function () {
            this.setData({
                memberQueryPreferenceDto: {
                    distance: null,
                    fastSlow: null,
                    stationType: null,
                    construction: null,
					discount: null
                },
                page: 1,
                showPreference: false
            });
			this.$refs.showPreferencePup.close()
            this.getStationPage('replace');
        },

        //确定偏好
        enterPreference: function () {
            this.setData({
                page: 1,
                showPreference: false
            });
			this.$refs.showPreferencePup.close()
            this.getStationPage('replace');
        },

        //展开综合排序
        showComprehensiveFun: function () {
          this.$refs.showRegionPup.close()
          this.$refs.showPreferencePup.close()
          this.$refs.showComprehensivePup.open()
        },

        //关闭综合排序
        onCloseComprehensive: function () {
            this.setData({
                showComprehensive: false
            });
        },

        //清除综合排序
        canalComprehensive: function () {
            this.setData({
                comprehensiveIndex: 0,
                sortMode: null,
                page: 1,
                showComprehensive: false
            });
            this.getStationPage('replace');
        },

        //确定综合排序
        enterComprehensive: function () {
            this.setData({
                page: 1,
                showComprehensive: false
            });
            this.getStationPage('replace');
        },

        checkComprehensive: function (e) {
            var index = e.currentTarget.dataset.index;
            var sortMode = e.currentTarget.dataset.value;
            this.setData({
                comprehensiveIndex: index,
                sortMode: sortMode
            });
			this.$refs.showComprehensivePup.close()
        },

        // 查询
        goSearchSite: function (e) {
            this.getStationPage('replace');
        },

        // 获取站点
        getSite: function () {
            this.setData({
                siteList: this.siteList
            });
        },

		//tab栏
		checkIndex: function(e) {
			var value = e.currentTarget.dataset.value;
			this.navIndex = value
			this.page = 1
			this.getStationPage('replace');
		},
    }
};
</script>
<style lang="less" scoped>
@import url("./siteList.less");
</style>
